<template>
	<view class="layout">
		<view class="name">
			王子航
		</view>
		<view class="">
			{{ userInfoStore.userInfo._id ?? "未知" }}
		</view>
		<image src="/static/uni.png" mode="" class="avatar"></image>
		
		<view class="optionsArea">
			<view class="optionItem" @click="onClickModifyUserName">
				<view class="">
					<uni-icons type="person"></uni-icons>
					用户名
				</view>
				<view class="">
					{{ userInfoStore.userInfo.userName ?? "未知" }}
					<uni-icons type="arrow-right"></uni-icons>
				</view>
				
			</view>

			<!-- <scroll-view scroll-y="true" >
				<view v-for="item in 12">
					<view class="optionItem">
						<view class="">
							<uni-icons type="person"></uni-icons>
							1233
						</view>
						<uni-icons type="arrow-right"></uni-icons>
					</view>
				</view>
			</scroll-view> -->
		</view>
		
		<uni-popup ref="modifyDialog" type="center" :is-mask-click="false">
			<view class="modifyDialog">
				<view class="title">
					修改用户名
				</view>
				<input  class="input" v-model="inputValue" maxlength="10" placeholder="请输入内容" />
				<view class="buttonRow">
					<view class="confirm" @click="confirm">确认</view>
					<view class="cancel" @click="cancel">取消</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import { useUserInfoStore } from '../../../store';
	import { storeToRefs } from "pinia";
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	
	// const { userInfo } = storeToRefs(userInfoStore)
	
	const modifyDialog = ref(null);
	const inputValue = ref('');
	
	function onClickModifyUserName(){
		modifyDialog.value.open()
	}
	
	const confirm = async () => { 
		// success: async (res) => {
		// 	if(res.result.code === 200){
		// 		uni.showToast({
		// 		  title: '用户名更新成功',
		// 		  icon: 'success'
		// 		});
		// 		const userInfoRes = await uniCloud.callFunction({
		// 			name: 'getUserInfo',
		// 			data: {
		// 			  uuid: userInfoStore.userInfo.uuid
		// 			}
		// 		});
				
		// 		console.log(userInfoRes.result.data)
		// 		userInfoStore.userInfo.value = userInfoRes.result.data
		// 	}
		// }
		const res = await uniCloud.callFunction({
			name: "updateUserName",
			data: {
				uuid: userInfoStore.userInfo.uuid,
				userName: inputValue.value
			},
			
		})
			
		if(res.result.code === 200){
			uni.showToast({
			  title: '用户名更新成功',
			  icon: 'success'
			});
			const userInfoRes = await uniCloud.callFunction({
				name: 'getUserInfo',
				data: {
				  uuid: userInfoStore.userInfo.uuid
				}
			});
			userInfoStore.setUserInfo(userInfoRes.result.data)
		}
		
		modifyDialog.value.close()
		// inputValue.value = ''
	}
	
		
	function cancel(){
		modifyDialog.value.close()
		// inputValue.value = ''
	}
	
</script>

<style lang="scss" scoped>
	.layout{
		display: flex;
		flex-direction: column;
		align-items: center;
		.name{
			margin-top: 20rpx;
			margin-bottom: 60rpx;
		}
		image{
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
		}
			
		.optionsArea{
			margin-top: 100rpx;
			width: 100%;
			.optionItem{
				padding: 20rpx 20rpx;
				margin: 20rpx;
				border: 2rpx solid #18BB7C;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}
		
		.modifyDialog{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 50rpx;
			padding: 40rpx;
			background-color: white;
			border-radius: 50rpx;
			.input{
				text-align: center;
				padding: 10px 0;
				font-size: 20px;
				border: 2px solid #ccc;
				border-radius: 10px;
			}
			.title{
				color: black;
				font-size: 24px;
			}
			.buttonRow{
				display: flex;
				flex-direction: row;
				gap: 30rpx;
				.confirm{
					padding: 15rpx 50rpx;
					border-radius: 50rpx;
					background-color: #18BB7C;
					color: white;
					font-size: 24px;
				}
				.cancel{
					padding: 15rpx 50rpx;
					border-radius: 50rpx;
					background-color: #F6465D;
					color: white;
					font-size: 24px;
				}
			}
		}
	}
</style>
